// 短视频播放
document.querySelector('.video ul').onclick = function() {
    document.body.style.overflow = 'hidden'
    document.querySelector('.video-wrapper').style.display = 'block'
}
document.querySelector('.video-wrapper .close').onclick = function() {
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'

    document.querySelector('.video-wrapper video').pause()
}


//JS-追加图片
//定义图片位置
let cols = [
    {left:0, top:0},
    {left:254, top:0},
    {left:254*2, top:0},
    {left:254*3, top:0},  
]
let videoHeight = 0



function Waterfall(){
    //循环打印1-56
    for (let num=1; num<=56; num++) {
        //循环里面li标签 - 追加到页面即可
        let liObj = document.createElement('li')
        liObj.style.position = 'absolute'
        liObj.style.display = 'none'
        liObj.innerHTML = `
                <div>
                    <img src="./assets/imgs2/${num}.jpg" alt="">
                </div>
                <span>${num} 初秋絮语，用音乐记下你的点点滴滴</span>
                <p>
                    <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
                </p>
            `
        document.querySelector('.video ul').appendChild(liObj)

        liObj.querySelector('img').onload = function() {
            let minHeightIndex = 0
            cols.forEach((item,i) =>{
                if (cols[minHeightIndex].top > item.top){
                    minHeightIndex = i
                }
            })
            liObj.style.display = 'block'
            liObj.style.left = cols[minHeightIndex].left + 'px'
            liObj.style.top = cols[minHeightIndex].top + 'px'
            cols[minHeightIndex].top += liObj.offsetHeight


            //记录最后一个图片的top位置
            videoHeight = cols[minHeightIndex].top
        }
    }
}

//JS-无限滚动
//1.监控滚动条变化
//2.事件处理函数中 - 获取默认可见视口高度 + 滚动条滚动高度
//3.事件处理函数中 - 判断 
window.onscroll = function() {
    let clientHeight = window.innerHeight || document.documentElement.clientHeight
    let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop

    if (clientHeight + scrollHeight >=videoHeight) {
        Waterfall()
    }
}

window.addEventListener('load', Waterfall)